<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <div v-if="childDataType=='单位'" class="CmDetail_box CmDetail_box_qy">
      <div class="CmDetail_header">
        <div class="customerManagement_title">
          <div class="customerManagement_title_return" @click="returnHistiy">
            <img src="@/assets/appimg/customerManagement/returnimg.png" alt>
            <span>客户信息维护</span>
          </div>
        </div>
      </div>
      <div class="scroll" ref="scroll">
        <scroll>
          <div v-if="CmDetailDataQy[0].state">
            <div class="CmDetail_title">
              <h2>{{itemDataInfo.customerName}}</h2>
              <i>{{itemDataInfo.identityNo}}</i>
            </div>
            <div class="CmDetail_content_top"></div>
            <div class="CmDetail_content">
              <div class="CmDetail_content_title">
                <joys-enums
                  v-if="itemDataInfo.identityType"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="certificateType"
                  :contrast="itemDataInfo.identityType"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>所属国家</p>
                <joys-enums
                  v-if="itemDataInfo.customerNationalityId"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="countriesEnum"
                  :contrast="itemDataInfo.customerNationalityId"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>组织机构类型</p>

                <joys-enums
                  v-if="itemDataInfo.orgId"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="enterpriseType"
                  :contrast="itemDataInfo.orgId"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>经济性质</p>
                <joys-enums
                  v-if="itemDataInfo.economicsProperty"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="economicsProperty"
                  :contrast="itemDataInfo.economicsProperty"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>控股性质</p>
                <joys-enums
                  v-if="itemDataInfo.hodingNature"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="economicsProperty"
                  :contrast="itemDataInfo.hodingNature"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>行业门类</p>
                <span>{{itemDataInfo.industry}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>所在地区</p>
                <span>{{itemDataInfo.province}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>实际办公地址</p>
                <span>{{itemDataInfo.actualAddress}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>从业人数(人)</p>
                <span>{{itemDataInfo.practitionerNumber}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>营业收入(万元)</p>
                <span>{{itemDataInfo.operatoinRevenue }}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>企业规模</p>
                <joys-enums
                  v-if="itemDataInfo.enterpriseScale"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="enterpriseScale"
                  :contrast="itemDataInfo.enterpriseScale"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>法定代表人</p>
                <span>{{itemDataInfo.legalRepresentative }}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>法人证件类型</p>
                <joys-enums
                  v-if="itemDataInfo.lagalIdentityType"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="personCertificateType"
                  :contrast="itemDataInfo.lagalIdentityType"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>法定代表人证件号码</p>
                <span>{{itemDataInfo.lagalIdentityNo}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>成立日期</p>
                <span>{{itemDataInfo.establishmentDate}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>注册地址</p>
                <span>{{itemDataInfo.registeredAddress}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>经营期限</p>
                <span>
                  {{itemDataInfo.operatingPeriodStart}}
                  <i
                    v-if="itemDataInfo.operatingPeriodStart || itemDataInfo.operatingPeriodEnd"
                  >至</i>
                  {{itemDataInfo.operatingPeriodEnd}}
                </span>
              </div>
              <div class="CmDetail_content_item">
                <p>注册资本币种</p>
                <joys-enums
                  v-if="itemDataInfo.registeredCurrencyId"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="currency"
                  :contrast="itemDataInfo.registeredCurrencyId"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>注册资本(万元)</p>
                <span>{{itemDataInfo.registeredCaptital}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>实收资本（万元）</p>
                <span>{{itemDataInfo.actualCaptital}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>集团客户类型</p>
                <joys-enums
                  v-if="itemDataInfo.groupUserType"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="groupCustomerType"
                  :contrast="itemDataInfo.groupUserType"
                ></joys-enums>
                <span>{{itemDataInfo.groupUserType}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>经营范围</p>
                <span>{{itemDataInfo.businessScope}}</span>
              </div>
              <div class="CmDetail_content_item_font"></div>
            </div>
          </div>
          <div v-if="CmDetailDataQy[1].state">
            <div class="CmDetail_title">
              <h2>{{itemDataInfo.customerName}}</h2>
              <i>{{itemDataInfo.identityNo}}</i>
            </div>
            <div class="CmDetail_content_top"></div>
            <div class="CmDetail_content">
              <div class="CmDetail_content_title">{{itemDataInfo.customerName}}</div>
              <div class="CmDetail_content_item_font"></div>
            </div>
          </div>
          <div v-if="CmDetailDataQy[2].state">
            <div class="CmDetail_title">
              <h2>{{itemDataInfo.customerName}}</h2>
              <i>{{itemDataInfo.identityNo}}</i>
            </div>
            <div class="CmDetail_content_top"></div>
            <div class="CmDetail_content">
              <div class="CmDetail_content_item_font"></div>
            </div>
          </div>
          <div v-if="CmDetailDataQy[3].state">
            <div class="CmDetail_title">
              <h2>{{itemDataInfo.customerName}}</h2>
              <i>{{itemDataInfo.identityNo}}</i>
            </div>
            <div class="CmDetail_content_top"></div>
            <div class="CmDetail_content">
              <div class="CmDetail_content_item_font"></div>
            </div>
          </div>
        </scroll>
      </div>

      <div class="font_tab_box">
        <div class="font_tab">
          <div
            class="font_tab_item font_tab_item_qy"
            v-for="(item ,index) in CmDetailDataQy"
            :key="index"
            @click="chengItemQy(index)"
          >
            <div v-if="item.state" class="font_tab_item_img_max">
              <img :src="item.maxImg" alt>
            </div>
            <div v-else class="font_tab_item_img">
              <img :src="item.minImg" alt>
            </div>
            <span>{{item.title}}</span>
          </div>
        </div>
      </div>
      <!-- <div class="scroll" ref="scroll"></div> -->
    </div>
    <!-- 个人 -->
    <div v-else class="CmDetail_box">
      <div class="CmDetail_header">
        <div class="customerManagement_title">
          <div class="customerManagement_title_return" @click="returnHistiy">
            <img src="@/assets/appimg/customerManagement/returnimg.png" alt>
            <span>客户信息维护</span>
          </div>
        </div>
      </div>
      <div class="scroll" ref="scroll">
        <scroll>
          <div v-if="CmDetailDataGr[0].state">
            <div class="CmDetail_title">
              <h2>{{itemDataInfo.customerName}}</h2>
              <i>{{itemDataInfo.identityNo }}</i>
            </div>
            <div class="CmDetail_content_top"></div>
            <div class="CmDetail_content">
              <div class="CmDetail_content_title">
                <joys-enums
                  v-if="itemDataInfo.identityType"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="certificateType"
                  :contrast="itemDataInfo.identityType"
                ></joys-enums>
              </div>

              <div class="CmDetail_content_item">
                <p>联系电话</p>
                <span>{{itemDataInfo.telphone}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>性别</p>
                <span>{{itemDataInfo.sex == 'FEMALE'?"女":"男"}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>出生日期</p>
                <span>{{itemDataInfo.birthday}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>年龄</p>
                <span>{{itemDataInfo.age}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>民族</p>
                <span>{{itemDataInfo.nation}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>国籍</p>
                <joys-enums
                  v-if="itemDataInfo.customerNationalityId"
                  class="enumsSpan"
                  serviceName="lss-customer"
                  typeName="countriesEnum"
                  :contrast="itemDataInfo.customerNationalityId"
                ></joys-enums>
              </div>
              <div class="CmDetail_content_item">
                <p>证件有效期</p>
                <span>{{itemDataInfo.identityEffectiveEndDate}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>证件签发机关</p>
                <span>{{itemDataInfo.identityIssuingAuthority}}</span>
              </div>
              <div class="CmDetail_content_item CmDetail_content_item_unlike">
                <p>户籍地址</p>
                <span>{{itemDataInfo.censusRegisterAddress}}</span>
              </div>
              <div class="CmDetail_content_item_font"></div>
            </div>
          </div>
          <div v-if="CmDetailDataGr[1].state">
            <div class="CmDetail_title">
              <h2>{{itemDataInfo.customerName}}</h2>
              <i>{{itemDataInfo.identityNo }}</i>
            </div>
            <div class="CmDetail_content_top"></div>
            <div class="CmDetail_content">
              <div class="CmDetail_content_item">
                <p>性别</p>
                <span>{{itemDataInfo.sex}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>性别</p>
                <span>{{itemDataInfo.sex}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>性别</p>
                <span>{{itemDataInfo.sex}}</span>
              </div>
              <div class="CmDetail_content_item_font"></div>
            </div>
          </div>
          <div v-if="CmDetailDataGr[2].state">
            <div class="CmDetail_title">
              <h2>{{itemDataInfo.customerName}}</h2>
              <i>{{itemDataInfo.identityNo }}</i>
            </div>
            <div class="CmDetail_content_top"></div>
            <div class="CmDetail_content">
              <div class="CmDetail_content_item">
                <p>毛利润</p>
                <span>{{itemDataInfo.nation}}</span>
              </div>
              <div class="CmDetail_content_item">
                <p>净利润</p>
                <span>{{itemDataInfo.sex}}</span>
              </div>
              <div class="CmDetail_content_item_font"></div>
            </div>
          </div>
        </scroll>
      </div>
      <div class="font_tab_box">
        <div class="font_tab">
          <div
            class="font_tab_item"
            v-for="(item ,index) in CmDetailDataGr"
            :key="index"
            @click="chengItemGr(index)"
          >
            <div v-if="item.state" class="font_tab_item_img_max">
              <img :src="item.maxImg" alt>
            </div>
            <div v-else class="font_tab_item_img">
              <img :src="item.minImg" alt>
            </div>
            <span>{{item.title}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Scroll from "@/components/JoysScroll/JoysScroll";
import JoysEnums from "@/components/JoysEnums/JoysEnums";
export default {
  name: "CmDetail",
  components: {
    Scroll,
    JoysEnums
  },
  data() {
    return {
      CmDetailDataGr: [
        {
          title: "个人信息",
          state: 1,
          minImg: require("@/assets/appimg/customerManagement/cmDetail_gr1.png"),
          maxImg: require("../../../../assets/appimg/customerManagement/cmDetail_gr5.png")
        },
        {
          title: "附件信息",
          state: 0,
          minImg: require("@/assets/appimg/customerManagement/cmDetail_gr2.png"),
          maxImg: require("@/assets/appimg/customerManagement/cmDetail_gr6.png")
        },
        {
          title: "融资信息",
          state: 0,
          minImg: require("@/assets/appimg/customerManagement/cmDetail_gr3.png"),
          maxImg: require("@/assets/appimg/customerManagement/cmDetail_gr7.png")
        }
      ],
      CmDetailDataQy: [
        {
          title: "基本资料",
          state: 1,
          minImg: require("@/assets/appimg/customerManagement/cmDetail_qy1.png"),
          maxImg: require("@/assets/appimg/customerManagement/cmDetail_qy5.png")
        },
        {
          title: "股东高管信息",
          state: 0,
          minImg: require("@/assets/appimg/customerManagement/cmDetail_qy2.png"),
          maxImg: require("@/assets/appimg/customerManagement/cmDetail_qy6.png")
        },
        {
          title: "财报信息",
          state: 0,
          minImg: require("@/assets/appimg/customerManagement/cmDetail_qy3.png"),
          maxImg: require("@/assets/appimg/customerManagement/cmDetail_qy7.png")
        },
        {
          title: "附件信息",
          state: 0,
          minImg: require("@/assets/appimg/customerManagement/cmDetail_qy4.png"),
          maxImg: require("@/assets/appimg/customerManagement/cmDetail_qy8.png")
        }
      ],
      itemDataInfo: {}
    };
  },
  props: ["childDataType"],
  methods: {
    // 枚举查询
    QueryEnum(serviceName, typeName, contrast) {
      this.$axios({
        method: "get",
        url: "/joys-rest/" + serviceName + "/enums/" + typeName + "/items",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          return Promise.resolve("lllll");
          // return resolve(res, "kkkkk");
          for (let key in res.data) {
            if (res.data[key].value == "CN") {
              // 中国
              datainfo = res.data[key].label;
              // return (callback = res.data[key].label);
            }
          }
        })
        .catch(error => {
          console.log(error, "个人获取失败");
        });
      // return "中国";
    },
    // 请求数据
    itemQueryData(type, customerId) {
      this.itemDataInfo.customerType = type;
      // 个人
      if (type == "个人") {
        this.$axios({
          method: "get",
          url: `/joys-rest/lss-customer/custInfo/person/${customerId}`,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
          .then(res => {
            this.itemDataInfo = res.data;
          })
          .catch(error => {
            console.log(error, "个人获取失败");
          });
      } else if (type == "单位") {
        // 企业
        this.$axios({
          method: "get",
          url: `/joys-rest/lss-customer/custInfo/corp/${customerId}`,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
          .then(res => {
            this.itemDataInfo = res.data;
            // this.$refs.enumsSpan.QueryEnum();
          })
          .catch(error => {
            console.log(error, "企业获取失败");
          });
      }
    },
    // tab切换
    chengItemQy(v) {
      for (const key in this.CmDetailDataQy) {
        this.CmDetailDataQy[key].state = 0;
      }
      this.CmDetailDataQy[v].state = 1;
    },
    chengItemGr(v) {
      for (const key in this.CmDetailDataGr) {
        this.CmDetailDataGr[key].state = 0;
      }
      this.CmDetailDataGr[v].state = 1;
    },
    returnHistiy() {
      this.$emit("childReturnHistiy");
    }
  }
};
</script>

<style   scoped lang="less">
.CmDetail_box {
  background: #fff;
  position: fixed;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .CmDetail_header {
    height: 0.44rem;
    width: 100%;
    position: fixed;
    background: #f29827;
    z-index: 600;
    .customerManagement_title {
      width: 100%;
      height: 0.44rem;
      text-align: center;
      line-height: 0.44rem;
      // background: #ffffff;
      position: fixed;
      z-index: 6001;
      .customerManagement_title_return {
        margin-top: -0.04rem;
        float: left;
        img {
          // width: 0.15rem;
          height: 0.205rem;
          padding-left: 0.085rem;
          padding-top: 2px;
        }
        span {
          font-family: PingFangSC-Regular;
          font-size: 17px;
          color: #ffffff;
          letter-spacing: -0.41px;
          line-height: 22px;
        }
      }
    }
    .CmDetail_header_title {
      position: absolute;
      bottom: 0.15rem;
      left: 0.17rem;
      line-height: 0rem;
      h2 {
        font-family: PingFangSC-Semibold;
        font-size: 0.24rem;
        color: #ffffff;
        letter-spacing: 0.71px;
        text-align: center;
        height: 0.33rem;
        line-height: 0.33rem;
        margin-bottom: 0.08rem;
      }
      i {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 0;
        height: 0.2rem;
        line-height: 0.2rem;
      }
    }
  }
  .scroll {
    margin-bottom: 1.44rem;
    background: #f29827;
    height: 35%;
    .CmDetail_title {
      height: 1.96rem;
      // width: 100%;
      // padding-top: 0.72rem;
      background: #f29827;
      padding-left: 0.17rem;
      line-height: 0px;
      overflow: hidden;
      h2 {
        margin-top: 1.19rem;
        text-align: left;
        font-family: PingFangSC-Semibold;
        font-size: 0.24rem;
        color: #ffffff;
        letter-spacing: 0.71px;
        height: 0.33rem;
        line-height: 0.33rem;
        margin-bottom: 0.08rem;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      i {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 0;
        height: 0.2rem;
        line-height: 0.2rem;
      }
    }
    .CmDetail_content_top {
      height: 0.18rem;
      background: #f6f6f6;
      border-radius: 1px;
    }

    .CmDetail_content {
      padding: 0rem 0rem 0.14rem 0.16rem;
      background: #fff;
      margin-top: -1px;
      // height: 500px;
      .CmDetail_content_title {
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #3e3e3e;
        letter-spacing: 0;
        height: 0.57rem;
        line-height: 0.57rem;
        border-bottom: 1px solid #f6f6f6;
        font-weight: 600;
      }
      .CmDetail_content_item {
        height: 0.46rem;
        padding: 0.055rem 0;
        border-bottom: 1px solid #f6f6f6;
        line-height: 0px;
        p {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0, 22, 22, 0.45);
          letter-spacing: -0.29px;
          height: 0.2rem;
          line-height: 0.2rem;
        }
        .enumsSpan,
        span {
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: rgba(0, 22, 22, 0.85);
          letter-spacing: -0.38px;
          height: 0.26rem;
          line-height: 0.26rem;
        }
      }
      .CmDetail_content_item_unlike {
        height: auto !important;
      }
      .CmDetail_content_item_font {
        height: 0.74rem;
        width: 100%;
      }
    }
  }
  .font_tab_box {
    width: 100%;
    height: 74px;
    position: fixed;
    bottom: 0;
    z-index: 600;
    // text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(
      -180deg,
      rgba(238, 238, 238, 0) 0%,
      #ffffff 47%
    );
    .font_tab {
      width: 90%;
      height: 100%;
      background-image: linear-gradient(
        -180deg,
        rgba(238, 238, 238, 0) 0%,
        #ffffff 47%
      );
      .font_tab_item {
        float: left;
        width: 33.3333%;
        overflow: hidden;
        text-align: center;
        height: 0.74rem;
        line-height: 0rem;
        .font_tab_item_img {
          width: 0.42rem;
          height: 0.42rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          img {
            transition: all 0.377s ease;
            // transform: scale(0.8);
            width: 0.18rem;
          }
        }
        .font_tab_item_img_max {
          width: 0.42rem;
          height: 0.42rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          img {
            transition: all 0.377s ease;
            // transform: scale(1.3);
            width: 0.42rem;
          }
        }
        span {
          font-family: PingFangSC-Regular;
          font-size: 11px;
          color: #f29827;
          letter-spacing: -0.35px;
        }
      }
      .font_tab_item_qy {
        span {
          font-family: PingFangSC-Regular;
          font-size: 11px;
          color: #1f8ee0;
          letter-spacing: -0.35px;
        }
      }
    }
  }
}
.CmDetail_box_qy {
  .CmDetail_header {
    background: #1f8ee0;
  }
  .scroll {
    background: #1f8ee0;
    .CmDetail_title {
      background: #1f8ee0;
    }
  }
  .font_tab_box {
    width: 100%;
    height: 74px;
    position: fixed;
    bottom: 0;
    z-index: 600;
    // text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(
      -180deg,
      rgba(238, 238, 238, 0) 0%,
      #ffffff 47%
    );
    .font_tab {
      width: 90%;
      height: 100%;
      background-image: linear-gradient(
        -180deg,
        rgba(238, 238, 238, 0) 0%,
        #ffffff 47%
      );
      .font_tab_item {
        float: left;
        width: 25%;
        overflow: hidden;
        text-align: center;
        height: 0.74rem;
        line-height: 0rem;
        .font_tab_item_img {
          width: 0.42rem;
          height: 0.42rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          img {
            transition: all 0.377s ease;
            // transform: scale(0.8);
            width: 0.18rem;
          }
        }
        .font_tab_item_img_max {
          width: 0.42rem;
          height: 0.42rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          img {
            transition: all 0.377s ease;
            // transform: scale(1.3);
            width: 0.42rem;
          }
        }
        span {
          font-family: PingFangSC-Regular;
          font-size: 11px;
          color: #f29827;
          letter-spacing: -0.35px;
        }
      }
      .font_tab_item_qy {
        span {
          font-family: PingFangSC-Regular;
          font-size: 11px;
          color: #1f8ee0;
          letter-spacing: -0.35px;
        }
      }
    }
  }
}
</style>
